

<div class="root">
  
  <div>
    <h4>“{@html $inceptionLabels[$currentClassAtlasCompareIndex]}” <br>filtered by top rank</h4>
    <div class="atlas">
      <ClassAtlas showAttribution={true} classFilter={$currentClassAtlasCompareIndex} filterType="winner" />
    </div>
    <div class="figcaption">We pluck only those activations whose top attribution is toward the class in question. The results are often much more focused and isolated, exclusive to the class. Some are low magnitude, like backgrounds, and we miss correlations or concepts that are shared among many classes. </div>
  </div>
  <div>
    <h4>“{@html $inceptionLabels[$currentClassAtlasCompareIndex]}” <br>filtered by overall magnitude</h4>
    <div class="atlas">
      <ClassAtlas showAttribution={true} classFilter={$currentClassAtlasCompareIndex} filterType="top" />
    </div>
    <div class="figcaption">Here we sort all the activations by the magnitude toward the class in question (independent of other classes) and take the top 2,000 activations. We see more correlated activations that could, on their own, contribute to another classification (We label each activation with the class that it contributes toward most). Notice that certain fish that are commonly seen while snorkeling now show up with that class, and a “coffee mug” now shows up with “crossword puzzle”. Some of them appear spurious, however.</div>
  </div>
  <div class="chooser-container">
    <div class="chooser">
      {#each $classAtlasIndices as c}
        <label class="{$currentClassAtlasCompareIndex === c ? 'selected' : ''}" title="{c}">
          <input type=radio bind:group=$currentClassAtlasCompareIndex value={c}>
          {$inceptionLabels[c]}
        </label>
      {/each}
    </div>
  </div>
</div>

<script>
export default {
  components: {
    ClassAtlas: "./ClassAtlas.html"
  },
  data() {
    return {
    };
  },
  computed: {
  }
}
</script>

<style>
.root {
  max-width: 1200px;
  padding: 0 20px;
  margin: 0 auto;
  display: grid;
  grid-column-gap: 20px;
  grid-template-columns: 1fr 1fr;
}
button {
  display: block;
}
.figcaption {
  margin-top: 20px;
}
.figcaption b {
  text-transform: uppercase;
  margin-right: 8px;
}
h4 {
  margin-top: 0;
}

.chooser-container {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
  position: relative;
  min-height: 160px;
  grid-column: 1/3;
  margin-top: 16px;
}

.chooser {
  position: absolute;
  border-left: solid 1px #ddd;
  width: 100%;
}
.chooser label {
  position: relative;
  font-size: 10px;
  line-height: 1em;
  display: block;
  border-left: solid 3px white;
  padding: 5px 5px 5px 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}
.chooser label input {
  position: absolute;
  opacity: 0;
}
.chooser label:hover {
    background-color: rgba(255, 130, 0, 0.04);
  }
.chooser label.selected {
  border-left-color: rgb(255, 130, 0);
  color: rgb(255, 130, 0);
  background-color: rgba(255, 130, 0, 0.08);
  font-weight: bold;
}
@media(min-width: 600px) {
  .root {
    display: grid;
    grid-column-gap: 20px;
    grid-template-columns: 1fr 1fr 120px;
  }
  .chooser-container {
    grid-column: auto;
    margin: 0;
  }
}
</style>
